<template>
  <div class="index">
    <div class="center">
      <!--    头部选项卡-->
      <van-grid :column-num="3" :border="false">
        <van-grid-item
          v-for="(item, i) in topList"
          :key="i"
          :text="item.text"
          :icon="item.icon"
          :to="item.to"
        ></van-grid-item>
      </van-grid>
      <!--    轮播图-->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="../assets/img/Carousel1.png" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../assets/img/Carousel2.png" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!--    标签页-->
      <div class="zxgd">
        <h2>整装案例</h2>
        <p>查看更多案例 ></p>
      </div>
      <infinite></infinite>
    </div>

    <!--  底部选项卡-->
    <van-tabbar v-model="active" fixed>
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="chat-o">消息</van-tabbar-item>
      <van-tabbar-item icon="manager-o" to="/user">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import infinite from './Infinite.vue'
  export default {
  components:{infinite},
  name: "Index",
  data() {
    return {
      active: 0,
      topList: [
        {
          text: "整装产品",
          icon: require("../assets/img/top1.png"),
        },
        {
          text: "个性化产品",
          icon: require("../assets/img/top2.png"),
        },
        {
          text: "在线工地",
          icon: require("../assets/img/top3.png"),
          to: "/infinite",
        },
      ],
    };
  },
};
</script>

<style lang="scss">
@import "../../public/sass/index";
.zxgd{
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}
.zxgd h2{
  margin-left: 10px;
  width: 50%;
  font-size: 20px;
  font-weight:bolder;
}
.zxgd p{
  width: 50%;
  text-align: right;
  line-height: 20px;
  color: #999999;
  font-size: 14px;
}
</style>
